<template>
    <span class="support-icon" :class="iconClass"></span>
</template>

<script>

export default {
    props: {//专门用来接收父组件传进来的值 props相当于组件自己数据源 可以直接用
        size:{
            type: String,
            default: '1'
        },
        type:{
            type: Number,
            default: 0
        }
    },
    computed: {//计算属性中的函数名也可以直接被当作数据源直接使用
        iconClass(){
            const classMap = [
                'decrease','discount','special','invoice','guarantee'
            ]
            return `icon-${this.size} ${classMap[this.type]}`
        }
    }
}
</script>

<style lang="less" scoped>
@import '@/common/style/mixin.less';
.support-icon {
    display: inline-block;
    background: no-repeat;  
}
.icon-1{
    width: 12px;
    height: 12px;
    background-size: 100%;
    &.decrease{
        .bg-image('decrease_1')
    }
    &.discount{
        .bg-image('discount_1')
    }
    &.special{
        .bg-image('special_1')
    }
    &.invoice{
        .bg-image('invoice_1')
    }
    &.guarantee{
        .bg-image('guarantee_1')
    }
}
.icon-2{
    width: 16px;
    height: 16px;
    background-size: 100%;
    &.decrease{
        .bg-image('decrease_2')
    }
    &.discount{
        .bg-image('discount_2')
    }
    &.special{
        .bg-image('special_2')
    }
    &.invoice{
        .bg-image('invoice_2')
    }
    &.guarantee{
        .bg-image('guarantee_2')
    }
}
.icon-3{
    width: 12px;
    height: 12px;
    background-size: 100%;
    &.decrease{
        .bg-image('decrease_3')
    }
    &.discount{
        .bg-image('discount_3')
    }
    &.special{
        .bg-image('special_3')
    }
    &.invoice{
        .bg-image('invoice_3')
    }
    &.guarantee{
        .bg-image('guarantee_3')
    }
}
.icon-4{
    width: 16px;
    height: 16px;
    background-size: 100%;
    &.decrease{
        .bg-image('decrease_4')
    }
    &.discount{
        .bg-image('discount_4')
    }
    &.special{
        .bg-image('special_4')
    }
    &.invoice{
        .bg-image('invoice_4')
    }
    &.guarantee{
        .bg-image('guarantee_4')
    }
}
</style>